<template>
  <div class="strut-div" style="height: 280px;">
    <el-table :data="tableData"
              :height="config.option.height"
              :border="false"
              :fit="true"
              :highlight-current-row="false"
              :header-row-style="{color:config.option.tableColor}"
              header-row-class-name="table-header"
              row-class-name='table-body'
              style="width: 100%;text-align: center;">
      <el-table-column :prop="item.prop" :label="item.title" v-for="item in config.option.tableHeader" :key="item.prop">
        <template slot-scope="scope">
          <el-progress color="#10C59C" v-if="item.type === 'progress'"
                       :percentage="scope.row[item.prop]" :show-text='true' :text-inside='true'
                       :status='scope.row.status'></el-progress>
          <span v-else>{{scope.row[item.prop]}}</span>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
  export default {
    props: ['config'],
    data() {
      return {
        tableData: []
      }
    },
    methods: {
      initTable() {
        setTimeout(() => {
          this.tableData = [{
            trade: '1',
            investment: '历山舜庙风景旅游区',
            increase: '景区工作人员服务态度差，出言不逊',
            progress: 80,
          },{
            trade: '2',
            investment: '乾元山风景旅游区',
            increase: '景区乱收费现象严重',
            progress: 80,
          },{
            trade: '3',
            investment: '白石温家大院',
            increase: '景区环境较差，垃圾比较多',
            progress: 80,
          },{
            trade: '4',
            investment: '苏三监狱和苏三还愿处',
            increase: '工作程序混乱，效率低下',
            progress: 80,
          },{
            trade: '5',
            investment: '大槐树寻根祭祖园',
            increase: '饭菜口味差，卫生不满意',
            progress: 80,
          },{
            trade: '6',
            investment: '青龙山玄帝宫',
            increase: '缺乏卫生设施，卫生条件差',
            progress: 80,
          },{
            trade: '7',
            investment: '广胜寺',
            increase: '交通混乱，车辆摆放无指定地点',
            progress: 80,
          }];
        }, 300);
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      formatter(row, column) {
        return row.address;
      }
    },
    mounted() {

      // this.chart = echarts.init(document.getElementById(this.config.option.id));
    }
  }


</script>

<style lang="scss" type="text/scss">
  .table-header {
    height: 34px;
  
    > th {
      height: 34px;
      padding: 0;
  
      > .cell {
        height: 34px;
        line-height: 34px;
        font-size: 14px;
        background-color: transparent !important;
      }
    }
  }
  
  .el-table th, .el-table tr {
    background-color: transparent;
    text-align: center;
  }
  
  .table-body {
    background-color: transparent !important;
    height: 34px;
    line-height: 34px;
  
    > td {
      padding: 0;
      text-align: center;
    }
  
    color: #E9F4FF;
  }

  /* 用来设置当前页面element全局table的内间距 */
  .el-table__row td {
    padding: 0;
  }

  /* 用来设置当前页面element全局table 选中某行时的背景色*/
  .el-table__body tr.current-row > td {
    background-color: #1C4C7D !important;
    /* color: #f19944; */
    /* 设置文字颜色，可以选择不设置 */
  }

  /* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #1C4C7D;
    /* color: #f19944; */
    /* 设置文字颜色，可以选择不设置 */
  }

  /*chrome滚动条颜色设置*/

  *::-webkit-scrollbar {
    width: 7px;
    height: 10px;
    background-color: transparent;
  }

  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  *::-webkit-scrollbar-track {
    background-color: #000000;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  *::-webkit-scrollbar-thumb {
    background-color: #176CA0;
    border-radius: 6px;
  }

  /*定义滑块 内阴影+圆角*/
  .scrollbarHide::-webkit-scrollbar {
    display: none;
  }

  .scrollbarShow::-webkit-scrollbar {
    display: block
  }

  .el-progress-bar__outer {
    height: 14px !important;
    position: relative;
  }

</style>
